<!-- <template>
  <div class="d-flex w-100 h-100">
 <div style="width: 75%;height: 100%;">
     <div
id="ndkh"
class="w-100 "
style="height: 90%; position: relative"
></div>  
</div> 

<div style="width:25%;height: 100%;" >
<fakeLenfend
style="width:100%;height: 90%;"
 :color="useOptions().colors.value.slice(0,3)"
 :text="['优秀项目','良好项目','一般项目']"
 :value=" [50, 40, 30]"
 :orient="'column'"
 >
</fakeLenfend>
</div>
</div>

</template>


<script setup lang='ts'>
import * as echarts from "echarts";
import fakeLenfend from '@/components/project/fakeLegend.vue'
import { useOptions } from '@/hook/useOptions'
const props = defineProps({
echartsData: {
type: Array,
default: () => [],
},

});
var colors = [
'#5e81ec',
'#ffc855',
'#98e79b',
'#00d695',
'#00b29a',
'#5470c6',
'#91cc75',
'#fac858',
'#ee6666',
'#73c0de',
'#3ba272',
'#fc8452',
'#9a60b4',
'#ea7ccc',
];

const base64_1 =
  '';
const base64_2 =
  '';
const base64_3 =
  '';
const base64_4 =
  '';
const base64_5 =
  '';


const chartData = [50, 40, 30, ];
const xAxisData = ['优秀项目','良好项目','一般项目']

let option = {
  tooltip: {
    show: true,
    formatter: function (params:any) {
      return `${params.name}:${chartData[params.dataIndex]}`;
    }
  },
  grid: {
    left: '10%',
    top: '19%',
    bottom: '50%'
  },
  xAxis: {
    show: false,
    data: xAxisData
  },
  yAxis: {
    show: false
  },
  series: [
    {
      type: 'pictorialBar',
      data: [
        {
          name: '优秀项目',
          z: 100,
          value: 120,
          symbolSize: [60, 40],
          symbolPosition: 'center',
          symbolOffset: [140, 20], // 顶层图像
          symbol: 'image://' + base64_1
        },
        {
          name: '良好项目',
          z: 90,
          value: 57,
          symbolSize: [120, 60],
          symbolPosition: 'center',
          symbolOffset: [20, 50], // 中间层图像
          symbol: 'image://' + base64_2
        },
        {
          name: '一般项目',
          z: 80,
          value: 42,
          symbolSize: [200, 100],
          symbolPosition: 'center',
          symbolOffset: [-100, 100], // 底层图像
          symbol: 'image://' + base64_3
        }
        // 根据需要继续添加更多的图像数据
      ]
    }
  ]
};

let myChart:any=null

onMounted(() => {
myChart = echarts.init(
document.getElementById('ndkh') as HTMLElement
);

myChart.setOption(option);
});
onBeforeUnmount(() => {
// 销毁 ECharts 实例
if (myChart) {
  myChart.dispose();
}
});
</script>

<style>

</style> -->
<template>
  <div style="font-size: 20px">
    <img src="../../../../assets/image/jianshe/title.png" alt="" />
    项目节点数量
  </div>
  <div class="d-flex w-100 h-100">
    <div style="height: 100%; width: 38%">
      <div id="xu3" style="width: 100%; height: 100%"></div>
    </div>
    <div style="height: 100%; width: 62%" v-if=data.length>
      <div class="glitem back1 d-flex" :class="index === 0 ? 'back1' : 'back2'" :style="{ marginTop: index === 0 ?  '40px' : '20px'}" v-for="(item, index) in data" :key='data.name'>
        <div style="margin-left: 75px">{{ item.name }}</div>
        <div style="margin-left: 50px; color: #0bf7fb">{{ item.value }}</div>
        <div>个</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useFunc } from "@/hook/useFunc";
import * as echarts from "echarts";
const props = defineProps({
  selectValue: {
    type: Number,
    default: 2024,
  },
});
const colors = [["0, 207, 230"], ["184, 235, 143"], ["96, 255, 206"]];

const jsonData: any = inject("jsonData");

// const allData: any = computed(() =>  jsonData.value && jsonData.value.jsgl ? jsonData.value.jsgl.xmjdsl : {});
const allData=ref<any>({})

// const current: any = computed(() => allData && allData.value ? allData.value[props.selectValue]: [])
const current: any = computed(() => allData && allData.value ? allData.value[props.selectValue]: [])


const data = ref(<any>[]);
const names = ["建设中", "已竣工", "未开工"];
let myChart: any;
watch(
  () => current.value,
  (newValue, oldValue) => {
  
    if (newValue) {
      const arr = newValue;
      const  list = names.map((name, i) => ({
        name,
        value: arr[i + 1],
      }));
      data.value = list

      nextTick(() => {
        if (!myChart) {
          myChart = echarts.init(document.getElementById("xu3") as HTMLElement);
        }
        myChart.setOption(calcOption(arr[0], colors, list));
      });
    }
  }
);
const getData = (value: any) => {};
onBeforeMount(async() => {
  allData.value= await  useFunc().getData("jsgl","xmjdsl");
});
onMounted(() => {
  // myChart = echarts.init(document.getElementById("xu3") as HTMLElement);
  // myChart.setOption(calcOption(200, colors, data));
});

const calcOption = (count: any, colorList: any, data: any) => {
  return {
    title: [
      {
        text: count,
        x: "center",
        y: "40%",
        textStyle: {
          fontWeight: "normal",
          fontSize: 24,
          color: "#fff",
        },
      },
      {
        text: "项目数量",
        x: "center",
        y: "50%",
        textStyle: {
          fontWeight: "normal",
          fontSize: 20,
          color: "#6B747F",
        },
      },
    ],
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
    tooltip: {
      show: false,
    },

    series: [
      {
        name: "干流",
        type: "pie",
        radius: ["65%", "80%"],
        center: ["50%", "50%"],
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            shadowBlur: 0,
            shadowColor: "#203665",
          },
        },
        data: data.map((it: any, i: any) => {
          return {
            value: it.value,
            name: it.label,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0.05,
                    color: `rgba(${colorList[i][0]},0.2)`,
                  },
                  {
                    offset: 0.5,
                    color: `rgba(${colorList[i][0]},0.5)`,
                  },
                  {
                    offset: 1,
                    color: `rgba(${colorList[i][0]},1)`,
                  },
                ]),
              },
              color: `rgba(${colorList[i]},0.7)`,
              borderColor: `rgba(${colorList[i]},1)`,
              borderWidth: 1,
            },
          };
        }),
      },
      {
        type: "pie", // 内层细圆环2
        radius: ["55%", "56%"],
        hoverAnimation: false,
        clockWise: false,
        backGround: "rgba(0, 255, 185, 0.70)",
        itemStyle: {
          color: "#2858BA",
        },
        label: {
          show: false,
        },
        data: [1],
      },
    ],
  };
};
</script>

<style scoped lang="less">
.back1 {
  background: url("../../../../assets/image/underGround/cj.png");
}
.back2 {
  background: url("../../../../assets/image/underGround/hj.png");
}
.glitem {
  width: 100%;
  background-size: 100% 100%;
  margin-top: 10px;
  font-weight: 400;
  line-height: 70px;
  font-size: 27px;
  font-family: "优设标题黑";
}
</style>
